<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html ng-app="LeaderboardApp">
<head>
<meta charset="UTF-8">
<title>Administración de Usuarios</title>
<link href="/Leaderboard/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/select2.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/select2-bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/styles.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/respond.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/bootstrap.min.js"></script>

<!--[if lt IE 9]><script type="text/javascript" src="/Leaderboard/js/lib/angularjs/html5shiv-printshiv.min.js"></script><![endif]-->
<!--[if lt IE 8]><script type="text/javascript" src="/Leaderboard/js/lib/angularjs/json3.min.js"></script><![endif]-->

<script type="text/javascript" src="/Leaderboard/js/lib/select2.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/angularjs/angularjs-1.2.16.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/controllers.init.js"></script>
<script type="text/javascript" src="/Leaderboard/js/controllers.admin.js"></script>

<!--[if lte IE 8]>
<script type="text/javascript">
    $(document).ready(function() {
        angular.bootstrap(document);
    });
</script>
<![endif]-->
</head>
<body ng-controller="adminCtrl" ng-init="getBranches(); getRoles();">
	<div ng-include="'/Leaderboard/include/header.html'"></div>
	
	<div class="container">
		<div ng-include="'/Leaderboard/include/changePassword.html'"></div>
		<div ng-include="'/Leaderboard/include/messages.html'"></div>
	
		<div class="panel panel-primary">
			<div class="panel-heading"><h3 class="panel-title">Administraci&oacute;n de Usuarios</h3> {{paginator.description}}</div>
			<div class="panel-body panel-body-scrollable">
				<form role="form" class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-3 control-label">Seleccionar sucursal</label>
						<div class="col-sm-6">
							<select ng-change="getBranchUsers()" ng-options="branch.name for branch in branches" ng-model="branch" class="form-control ng-pristine ng-valid" name="branches" id="cmbBranches"></select>
						</div>
					</div>
				</form>
			
				<table class="table table-striped table-condensed table-bordered" ng-table="tableParams">
					<thead><tr><th>ID</th><th>Usuario</th><th>Rol</th><th>ID Empleado</th><th>ID Vendedor</th><th>Sucursal</th><th>Estado</th><th>Nombre</th><th colspan="2">Acciones</th></tr></thead>
					<tbody><tr ng-repeat="usr in users">
						<td>{{usr.id}}</td><td>{{usr.usuario}}</td><td>{{usr.rol}}</td><td>{{usr.idEmpleado}}</td><td>{{usr.idVendedor}}</td><td>{{sucursalUsuario(usr)}}</td><td>{{usr.estado}}</td><td>{{usr.nombre}}</td>
						<td>
							<span ng-show="usr.id !== loggedUser.id">
								<a class="link fixed-width" href="javascript:void(0);" ng-click="changeUserState(usr.id, 'A')" ng-hide="usr.estado === 'ACTIVO'">Activar</a>
								<a class="link fixed-width" href="javascript:void(0);" ng-click="changeUserState(usr.id, 'I')" ng-hide="usr.estado === 'INACTIVO'">Desactivar</a>
								&nbsp;
								<a class="link float-left" href="javascript:void(0);" ng-click="openUserDialog('edit', usr)">Editar</a>
								&nbsp;
							<a class="link float-left" href="javascript:void(0);" ng-click="delUser(usr.id)">Borrar</a>
							</span>
						</td>
					</tr></tbody>
				</table>
				<div class="wrap-center">
					<ul class="pagination">
						<li ng-class="paginator.hasPrevClass()"><a href="javascript:void(0);" ng-click="paginator.first(); getBranchUsers();">[ &laquo;</a></li>
						<li ng-class="paginator.hasPrevClass()"><a href="javascript:void(0);" ng-click="paginator.prev(); getBranchUsers();">&laquo;</a></li>
						<li ng-class="paginator.itemClass(pg)" ng-repeat="pg in paginator.pages()"><a href="javascript:void(0);" ng-click="paginator.toPage(pg); getBranchUsers();">{{paginator.itemDesc(pg)}}</a></li>
						<li ng-class="paginator.hasNextClass()"><a href="javascript:void(0);" ng-click="paginator.next(); getBranchUsers();">&raquo;</a></li>
						<li ng-class="paginator.hasNextClass()"><a href="javascript:void(0);" ng-click="paginator.last(); getBranchUsers();">&raquo; ]</a></li>
					</ul>
				</div>
			</div>
			<div class="panel-footer">
				<input id="usrSearch" name="usrSearch" class="form-control search-box" ng-model="paginator.filter" placeholder="Escriba el texto a buscar y presione ENTER" ng-enter="paginator.toPage(1); getBranchUsers();" />
				<button type="button" class="btn btn-default" ng-click="getBranchUsers(); getRoles();">Refrescar</button>
				<button type="button" class="btn btn-default" ng-click="openImportDialog()">
					<img src="/Leaderboard/images/page_excel.png" style="margin-top: -2px">
					Cargar desde Excel
				</button>
				<button type="button" class="btn btn-primary" ng-click="openUserDialog('add', null)">Agregar nuevo</button>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="dlgAddEditUser" role="dialog" aria-labelledby="dlgAddEditUser" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<form id="addUserForm" name="addUserForm" class="form-horizontal" role="form">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">Agregar/Editar Usuario</h4>
					</div>
					<div class="modal-body">
						<div ng-include="'/Leaderboard/include/modalMessages.html'"></div>
						<div class="form-group">
							<label for="txtUserName" class="col-sm-4 control-label">Usuario</label>
							<div class="col-sm-8">
								<input id="txtUserName" name="userName" class="form-control" type="text" maxlength="45" width="45" 
										ng-model="addUserData.user" autofocus required ng-disabled="loading || editUserMode" autofocus />
							</div>
						</div>
						<div class="form-group">
							<label for="txtEmpName" class="col-sm-4 control-label">Nombre</label>
							<div class="col-sm-8">
								<input id="txtEmpName" name="empName" class="form-control" type="text" maxlength="45" width="45" 
										ng-model="addUserData.name" autofocus required ng-disabled="loading" autofocus />
							</div>
						</div>
						<div class="form-group">
							<label for="cmbRoles" class="col-sm-4 control-label">Rol</label>
							<div class="col-sm-8">
								<select id="cmbRoles" name="cmbRoles" class="form-control" ng-model="addUserData.role" ng-options="rol.nombre for rol in roles" required ng-disabled="loading">
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="txtClave" class="col-sm-4 control-label">Clave</label>
							<div class="col-sm-8">
								<input id="txtClave" name="clave" class="form-control" type="password" maxlength="45" width="45" 
										ng-model="addUserData.password" ng-required="!editUserMode" ng-disabled="loading" />
							</div>
						</div>
						<div class="form-group">
							<label for="txtClave2" class="col-sm-4 control-label">Repetir clave</label>
							<div class="col-sm-8">
								<input id="txtClave2" name="clave2" class="form-control" type="password" maxlength="45" width="45" 
										ng-model="addUserData.repeatPassword" ng-required="!editUserMode" ng-disabled="loading" />
							</div>
						</div>
						<div class="form-group">
							<label for="txtEmpId" class="col-sm-4 control-label">ID Empleado</label>
							<div class="col-sm-8">
								<input id="txtEmpId" name="empId" class="form-control" type="text" maxlength="15" width="15" 
										ng-model="addUserData.empId" required ng-disabled="loading" value="0" />
							</div>
						</div>
						<div class="form-group">
							<label for="txtSellerId" class="col-sm-4 control-label">ID Vendedor</label>
							<div class="col-sm-8">
								<input id="txtSellerId" name="empId" class="form-control" type="text" maxlength="15" width="15" 
										ng-model="addUserData.sellerId" required ng-disabled="loading" value="0" />
							</div>
						</div>
						<div class="form-group" ng-show="!isSupervisor()">
							<label for="cmbSucursal" class="col-sm-4 control-label">Sucursal</label>
							<div class="col-sm-8">
								<select id="cmbSucursal" name="sucursal" class="form-control" ng-model="branch" ng-options="branch.name for branch in branches | filter:{name:'!TODAS'}" ng-required="!isSupervisor()" ng-disabled="loading">
								</select>
							</div>
						</div>
						<div class="form-group" ng-show="isSupervisor()">
							<label for="cmbSucursales" class="col-sm-4 control-label">Sucursales que supervisa</label>
							<div class="col-sm-8">
								<div class="lst-chx-container form-control">
									<span ng-repeat="suc in getRealBranches() | filter:filterSuc">
										<input type="checkbox" ng-model="suc.selected" ng-disabled="loading" ng-required="isSupervisor() && !atLeastOneSelected()" /> {{suc.id}} - {{suc.name}}<br/>
									</span>
								</div>
								<div class="filter-select">
									<input id="filterSuc" type="text" class="form-control" ng-model="filterSuc" placeholder="Filtrar sucursales" />
									Seleccionar&nbsp;
										<a class="link" href="javascript:void(0);" ng-click="selectAllSuc()">todas</a>&nbsp;
										<a class="link" href="javascript:void(0);" ng-click="selectNoneSuc()">ninguna</a>
								</div>
							</div>
						</div>
					</div>
					 <div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
						<button type="submit" class="btn btn-primary" ng-click="saveUser()" ng-disabled="loading || addUserForm.$invalid">Guardar cambios</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="dlgImportUsers" role="dialog" aria-labelledby="dlgImportUsers" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<form id="importUsersForm" name="importUsersForm" class="form-horizontal" role="form" method="post" action="/Leaderboard/FileUploadServlet/uploadUsuarios" enctype="multipart/form-data">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">Importar Usuarios</h4>
					</div>
					<div class="modal-body">
						<div ng-include="'/Leaderboard/include/modalMessages.html'"></div>
						<div class="form-group">
							<label for="upldFile" class="col-sm-4 control-label">Seleccionar archivo</label>
							<div class="col-sm-8">
								<input id="upldFile" name="fileName" class="form-control" type="file" accept="application/vnd.ms-excel" ng-disabled="loading || editUserMode" required />
								<span class="help-block">*Cargar archivos de tipo XLS o XLSX no mayores a 10MB</span>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
						<button type="submit" class="btn btn-primary" ng-disabled="loading || importUsersForm.$invalid">Cargar usuarios</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	
</body>
</html>